import React, { useState } from 'react';
import AppLayout from '../layout/AppLayout';
import Modal from '../components/Modal';
import { getChipsWithPrimary } from '../utils/chipConfig';
import './form.css';
import './frame8.css';

export default function DeleteConfirmDialog() {
  const [showDeleteModal, setShowDeleteModal] = useState(true)

  return (
    <>
      <AppLayout
        active="文件"
        chips={getChipsWithPrimary('细胞类型', '/cell-config')}
        subbar={(
          <div style={{ display:'flex', alignItems:'center', gap:12, width:'100%' }}>
            <div className="f8-icon-btn" style={{ opacity: 0.5 }}>◀</div>
            <div className="f8-icon-btn">＋</div>
            <div className="f8-pill">
              <span style={{ color:'#667085', padding:'0 8px' }}>＋ 细胞</span>
              <span style={{ color:'#667085', padding:'0 8px', borderLeft:'1px solid #e6eaee', borderRight:'1px solid #e6eaee' }}>＋ 分段</span>
              <span style={{ color:'#667085', padding:'0 8px' }}>＋ 机制</span>
            </div>
            <div style={{ marginLeft:'auto' }} className="f8-icon-btn">▾</div>
          </div>
        )}
      >
        <div style={{ display: 'flex', gap: 40, paddingTop: 24 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div className="f8-segment-buttons">
              <button className="f8-segment-btn active">分段0</button>
              <button className="f8-segment-btn">分段1</button>
              <button className="f8-segment-btn">分段2</button>
            </div>
          </div>
          
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div className="field">
              <label>分段名称</label>
              <div className="input">分段0</div>
            </div>
            
            <div className="f8-tabs">
              <button className="f8-tab active">通用</button>
              <button className="f8-tab">几何结构</button>
              <button className="f8-tab">拓扑结构</button>
            </div>
          </div>
        </div>
      </AppLayout>

      {showDeleteModal && (
        <Modal
          title="删除 Section0"
          onClose={() => setShowDeleteModal(false)}
          onConfirm={() => setShowDeleteModal(false)}
          confirmText="确认"
        >
          <p>您是否要移除 Section 0?</p>
        </Modal>
      )}
    </>
  )
}

